<?php
 

include("includes/tete.php"); 

// ====================  Title =============================================
if(isset($_GET['lang']))
{
	if($_GET['lang'] == 'eng')
	{
		echo "chatroom ZzChat";		
	}
	else
	{
		echo "chat ZzChat";
	}
}
else
{		
	echo "chat ZzChat";
}		
		
include("includes/entete.php"); 

//==================== Check if the user is log ===============================
if(isset($_SESSION['pseudo']))
{
?>
	<!-- Script to manage the message display -->
	<script type="text/javascript">

		
	$(function() {

		/** This function allows us to insert tag, like [i] and [/i] arround 
			selected text 
			@param startTag Open tag like [i]
			@param endTag close tag like [/i]
			@param textareaId id of the good field

		*/
		function insertTag(startTag, endTag, textareaId) {
			var field = document.getElementById(textareaId);
			field.focus();
			
			// for Internet explorer 
		    if (window.ActiveXObject) { 
		        var textRange = document.selection.createRange();            
		        var currentSelection = textRange.text;
		                
		        textRange.text = startTag + currentSelection + endTag;
		        textRange.moveStart("character", -endTag.length - currentSelection.length);
		        textRange.moveEnd("character", -endTag.length);
		        textRange.select();     
		    } 
		    // for the other 
		    else { 
		        var startSelection   = field.value.substring(0, field.selectionStart);
		        var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		        var endSelection     = field.value.substring(field.selectionEnd);
		                
		        field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		        field.focus();
		        field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
		    } 

		}
		

		// Link button with insertag function
		$('#italic').click(function(){
			insertTag('[i]','[/i]','writeMess')
		});

		$('#bold').click(function(){
			insertTag('[b]','[/b]','writeMess')
		});
		
		$('#underline').click(function(){
			insertTag('[u]','[/u]','writeMess')
		});

		$('#red').click(function(){
			insertTag('[r]','[/r]','writeMess')
		});
		
		$('#yellow').click(function(){
			insertTag('[y]','[/y]','writeMess')
		});

		$('#green').click(function(){
			insertTag('[g]','[/g]','writeMess')
		});

		// send new message without refresh
		$('#writeform').on('submit',function() {
			 var message = $('#writeMess').val();
			$.post("includes/writeMess.php",{"writeMess":message},function(content) {
				var deco ="deco";
				if(content.indexOf('deco') != -1)
					location.reload();
				else
					refreshChat();
			});
			refreshChat();

			$('#writeMess').val('');
			return false;	
		});

		// Refresh chat frame
		function refreshChat() {
			$.post('includes/scanMessList.php',function(content){
			$('#listMess').html(content);
			var mondiv=document.getElementById("listMess");
			mondiv.scrollTop=mondiv.scrollHeight;
			});
		
			setTimeout(refreshChat, 5000);
		}

		// Refrash Users frame
		function refreshUsers() {
			$.post('includes/scanUserList.php',function(content){$('#listUser').html(content);});
			setTimeout(refreshUsers, 5000);
		}

		refreshUsers();
		refreshChat();
	});

	</script>
			<h1>ZzChat</h1>
			<p class="titleUser">
			<?php 
			if(isset($_GET['lang']))
				{ 
					if($_GET['lang'] == 'eng')
					{
					?> 
						Connected user : 
					<?php
					}
					else
					{?>
						 Utilisateur Connecté : 
					<?php 
					}
				}
				else
				{
				?>
					 Utilisateur Connecté : 
				<?php 
				} 
				?>
			</p>
			<!-- User display -->
			<div id="listUser"></div>
			<!-- Message display -->
			<div id="listMess"></div>
			<div id="chat">

			<!-- tool to formatting text -->
			<p><img src="images/italic.png" alt="italic" title="button italic" class="icone" id="italic"/>
			<img src="images/underline.png" alt="underline" title="button italic" class="icone" id="underline"/>
			<img src="images/bold.png" alt="bold" title="button italic" class="icone" id="bold"/>
			<img src="images/rouge.png" alt="rouge" title="button red" class="icone" style="width: 18px; height:22px;" id="red"/>
			<img src="images/jaune.jpeg" alt="yellow" title="button yellow" class="icone" style="width: 18px; height:22px;" id="yellow"/>
			<img src="images/vert.png" alt="green" title="button yellow" class="icone" style="width: 18px; height:22px;" id="green"/></p>

			<!-- Message field -->
			<form id="writeform" method="post" action="#" >
				<p><input type="text" name="writeMess" id="writeMess" /></p>
				<p><input type="submit" value="Envoyer" id="button" class="validMess"/></p>
			</form>
		</div>

	<?php 
}
else
{
?>

	<p>
	<?php
		// If someone try to acces at this page whitout pseudo.
		if(isset($_GET['lang']))
		{				
			if($_GET['lang'] == 'eng')
			{	
				echo "You cannot acces at this page. You must be logon ( <a href='index.php?lang=".$_GET['lang']."'>login</a> )";	
			}
			else
			{
				echo "Vous n'êtes pas autorisez à accéder a cette page. Veuillez vous <a href='index.php'>identifier</a>";

			}
		}
		else
		{		
			echo "Vous n'êtes pas autorisez à accéder a cette page. Veuillez vous <a href='index.php'>identifier</a>";	 
		}
	?>		
	</p>
	
<?php
}
?>



<?php include("includes/footer.php"); ?>
